<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>A menu example</title>
    <!--引入css文件-->
    <link rel="stylesheet" href="css/style.css">
    <!-- Font Awesome 引入外部cdn 为了显示图标-->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css" integrity="sha512-z3gLpd7yknf1YoNbCzqRKc4qyor8gaKU1qmn+CShxbuBusANI9QpRohGBreCFkKxLhei6S9CQXFEbbKuqLg0DA==" crossorigin="anonymous" referrerpolicy="no-referrer" />
</head>
<body>
    <!-- 一个简单的菜单 用radio单选实现，name相同是为了实现单选-->
    <div class="tabs">
        <input type="radio" name="tabsMenu" id="home" checked>
        <input type="radio" name="tabsMenu" id="profile">
        <input type="radio" name="tabsMenu" id="likes">
        <input type="radio" name="tabsMenu" id="settings">
        <input type="radio" name="tabsMenu" id="nodifications">

        <!--设置个button分区，实现cdn提供的各种图标-->
        <div class="buttons">
            <label for="home"><i class="fa-solid fa-house"></i></label>
            <label for="profile"><i class="fa-solid fa-user"></i></label>
            <label for="likes"><i class="fa-solid fa-heart"></i></label>
            <label for="settings"><i class="fa-solid fa-gear"></i></label>
            <label for="nodifications"><i class="fa-solid fa-bell"></i></label>
            <!--这个分区是为了实现下划线-->
            <div class="underline"></div>
        </div>
    </div>
</body>
</html>